import React ,{useState,useEffect} from 'react'

import { Table, Pagination,Space } from 'antd'
import './index.scss'
import axios from '../../../../http/index';

export default function ProductLog() {


          // 表格数组 
    // const [data, setdatas] = useState([])

    // 页面初始渲染
      useEffect(() => {
        Updata()
    },[])

    // 初始化请求封装
    const Updata = () =>{
        axios({
            method:'GET',
            url:'/system/fp/productlog/findProductLog',
        })
        .then((res) => {
            console.log(res)
            // // setdatas(res.data.data)
            // const data = res.data.data
            // for (let i = 0 ; i < data.length; i++) {
            //     data[i].key = data[i].id
            // }
            // setdatas([...data])
            // console.log(data)
        })
        .catch((err) => {
            console.log(err)
        })
    
    }
    // 表单数据
    const dataSource = [
        {
          key: 1,
          bianhao: 1000001,
          xiaosou: {
            y1: 100.00,
            x1: 200.00
            },
          chuxiao: {
            y: 100.00,
            x: 200.00
            },
          zengsong: {
              y: 1000,
              x: 2000
            },
          daikuang: {
            y: 1000,
            x: 2000
            },
          shangxiajia: {
            j: '上架中',
            x: '上架中'
            },
          shenhe:  {
            j: '审核通过',
            x: '未审核'
            },
          caozuo:  {
            j: 'admin',
            x: '2018-07-07 16:58:11'
            },
        },
        {
          key: 2,
          bianhao: 1000002,
          xiaosou: {
            y1: 100.00,
            x1: 200.00
            },
          chuxiao: {
            y: 100.00,
            x: 200.00
            },
          zengsong: {
              y: 1000,
              x: 2000
            },
          daikuang: {
            y: 1000,
            x: 2000
            },
          shangxiajia: {
            j: '上架中',
            x: '上架中'
            },
          shenhe:  {
            j: '审核通过',
            x: '未审核'
            },
          caozuo:  {
            j: 'admin',
            x: '2018-07-07 16:58:11'
            },
        },
     
      ];
    //   表头
      const columns = [
        {
          title: '编号',
          dataIndex: 'bianhao',
          align: 'center',
          key: 'bianhao',

        },
        {
          title: '销售价格',
          dataIndex: 'xiaosou',
          align: 'center',
          key: 'xiaosou',
          render: (text, record) => {
            // console.log("jiage",text)
            // console.log("jiage11",record.xiaosou.y1)
              return(
                  <Space direction="vertical">
                    <span style={{display:'inline-block',}}>原:{record.xiaosou.y1}元</span>
                    <span>现:{record.xiaosou.x1}元</span>
                  </Space>
              )
          }
         },
        {
          title: '促销价格',
          dataIndex: 'chuxiao',
          align: 'center',
          key: 'chuxiao',
          render: (text, record) => {
            return(
                <Space direction="vertical">
                  <span style={{display:'inline-block',}}>原:{record.chuxiao.y}元</span>
                  <span>现:{record.chuxiao.x}元</span>
                </Space>
            )
        }
        },
        {
          title: '赠送虚拟币',
          dataIndex: 'zengsong',
          align: 'center',
          key: 'zengsong',
          render: (text, record) => {
            return(
                <Space direction="vertical"> 
                  <span style={{display:'inline-block',}}>原:{record.zengsong.y}</span>
                  <span>现:{record.zengsong.x}</span>
                </Space>
            )
        }
        },
        {
          title: '虚拟币贷款金额',
          dataIndex: 'daikuang',
          align: 'center',
          key: 'daikuang',
          render: (text, record) => {
            return(
                <Space direction="vertical">
                  <span style={{display:'inline-block',}}>原:{record.daikuang.y}</span>
                  <span>现:{record.daikuang.x}</span>
                </Space>
            )
        }
        },
        {
          title: '上下架',
          dataIndex: 'shangxiajia',
          align: 'center',
          key: 'shangxiajia',
          render: (text, record) => {
            return(
                <Space direction="vertical">
                  <span style={{display:'inline-block', }}>原:{record.shangxiajia.x}</span>
                  <span>原:{record.shangxiajia.x}</span>
                </Space>
            )
        }
        },
        {
          title: '审核状态',
          dataIndex: 'shenhe',
          align: 'center',
          key: 'shenhe',
          render: (text, record) => {
            return(
                <Space direction="vertical">
                  <span style={{display:'inline-block'}}>原:{record.shenhe.j}</span>
                  <span>原:{record.shenhe.x}</span>
                </Space>
            )
        }
        },
        {
          title: '操作信息',
          dataIndex: 'caozuo',
          align: 'center',
          key: 'caozuo',
          render: (text, record) => {
            return(
                <Space direction="vertical">
                  <span style={{display:'inline-block',color:'red'}}>{record.caozuo.j}</span>
                  <span>{record.caozuo.x}</span>
                </Space>
            )
        }
        },
      ];

    // 跳转到多少页
    function showTotal(total) {
        return `共 ${total} 条`;
    }
      

    return (
        <div className='product'>
             {/* 表头 */}
            <div className='data-list'>
                <div className='data-list-top'>
                    <span>数据列表</span>
                </div>
            </div>

            {/* 数据列表内容 */}
            <div>
                <Table bordered="true" rowSelection='checkbox'   columns={columns} dataSource={dataSource} />
            </div>

            {/* 底部 */}
            {/* <div className='footer'>
            <Pagination
                size="small"
                total={50}
                showTotal={showTotal}
                showSizeChanger
                showQuickJumper
                />
            </div> */}
        </div>
    )
}
